.custom-component-tabs {
  display: flex;
  position: fixed;
  width: 100%;
  z-index: 99;
  height: 88px;
  align-items: center;
  background-color: #fff;
  .tab {
    flex: 1;
    color: $black;
    font-size: 28px;
    text-align: center;
    &.active {
      font-size: 36px;
      font-weight: bold;
      .line {
        width: 30px;
        height: 8px;
        background:  <%= css === 'less'
        ? '@primary'
        : '$primary' %>;
        border-radius: 6px;
        margin: 6px auto 0 auto;
      }
    }

    .tab-value {
      position: relative;
      white-space: nowrap;
      display: inline-block;

      .number-dot {
        min-width: 14px;
        height: 30px;
        padding: 0 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 16px;
        background:  <%= css === 'less'
        ? '@primary'
        : '$primary' %>;
        color: #fff;
        position: absolute;
        font-size: 20px;
        top: -12px;
        left: 100%;
      }
    }
  }
}
